<template>
  <view class="z-model" v-if="showState">
    <view class="z-model-center">
      <slot name="header">
        <view class="z-model-center-header">
          <text>{{ title }}</text>
          <image lazy-load class="close" @click="showState = false" src="../static/image/close.png"></image>
        </view>
      </slot>
      <view class="z-model-center-center">
        <textarea :placeholder="placeholder" class="z-model-center-center-textArea" v-model="textAreaValue" focus cursor-spacing="143" />
      </view>
      <view class="z-model-center-bottom">
        <view class="z-model-center-bottom-tips">
          {{ tips }}
        </view>
        <view @click="submitBtn" class="z-model-center-bottom-btn">{{ subText }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      textAreaValue: '',
      showState: false,
      title: '标题',
      tips: '支持中文、英文（20个字符以内）',
      subText: '提交',
      modelData: {},
      placeholder: '必填',
      maxLength: 20
    }
  },
  methods: {
    ifModel({ showState = true, title = '', tips = '', placeholder = '', subText = '', modelData = {}, textAreaValue = '' }) {
      this.showState = showState
      this.title = title || '标题'
      this.tips = tips || '支持中文、英文（20个字符以内）'
      this.placeholder = placeholder || '必填'
      this.subText = subText || '提交'
      this.modelData = modelData || {}
      this.textAreaValue = textAreaValue
    },
    submitBtn() {
      console.log(this.textAreaValue)
      this.$emit('submitBtn', { value: this.textAreaValue, data: this.modelData })
      this.showState = false
      this.textAreaValue = ''
    }
  }
}
</script>

<style scoped>
.z-model {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.z-model-center-center-textArea {
  width: 690rpx;
  height: 180rpx;
  background: rgba(249, 251, 255, 1);
  border-radius: 10px;
  padding: 30rpx;
  font-size: 24rpx;
}
.z-model-center-bottom_ok {
  background: rgba(11, 97, 255, 1);
  border-radius: 5px;
  font-size: 30rpx;
  font-family: PingFang SC;
  color: rgba(255, 255, 255, 1);
  flex: 1;
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}
.z-model-center-bottom-btn {
  background: rgba(55, 126, 251, 1);
  border-radius: 4px;
  padding: 16rpx 43rpx;
  font-size: 20rpx;
  color: rgba(255, 255, 255, 1);
  letter-spacing: 1px;
}
.z-model-center-bottom-tips {
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  color: rgba(154, 155, 163, 1);
  letter-spacing: 1px;
}
.icon-guanbi {
  color: red;
}
.z-model-center-header {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #152c62;
  padding: 42rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.close {
  width: 30rpx;
  height: 30rpx;
}
.z-model-center-center {
  display: flex;
  padding: 0rpx 24rpx;
}
.z-model-center-bottom {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 26rpx 24rpx;
}
.z-model-center {
  background: rgba(255, 255, 255, 1);
  width: 100%;
}
</style>
